.modal .ChannelNotificationModal {
    width: 100%;
    max-width: 600px;
    margin-top: 5vh !important;
    overflow-y: hidden;

    .modal-content {
        flex-direction: column;
        border: var(--border-default);
        border-radius: var(--radius-l);
        box-shadow: var(--elevation-6);
        overflow-y: hidden;

        .GenericModal__wrapper {
            display: flex;
            overflow: hidden;
            max-height: calc(100vh - 160px);
            flex-direction: column;
            border: var(--border-default);
            border-radius: var(--radius-l);
            box-shadow: var(--elevation-6);

            .modal-header {
                padding: 0 !important;
            }

            .modal-body {
                display: flex;
                width: 100%;
                max-width: 1024px;
                min-height: 150px;
                flex-direction: column;
                gap: 24px;
                overflow-x: hidden;
                overflow-y: auto;

                main {
                    display: flex;
                    width: 100%;
                    max-width: 1024px;
                    min-height: 150px;
                    flex-direction: column;
                    padding: 28px 32px;
                    gap: 24px;
                    overflow-x: hidden;
                    overflow-y: auto;
                }
            }

            .modal-footer {
                display: flex;
                width: 100%;
                max-width: 1024px;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
            }
        }
    }

    &__ctr {
        display: flex;
        place-items: center;
    }

    &__reset-btn {
        display: flex;
        align-items: center;
        padding: 5px 8px;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: var(--button-bg);
        font-size: 12px;
        font-weight: 600;
        gap: 4px;

        i {
            font-size: 16px;
        }

        &:hover,
        &:active {
            background: rgba(var(--button-bg-rgb), 0.08);
        }
    }

    &__server-error {
        flex-grow: 1;
        color: var(--error-text);
    }

    &__divider {
        border-bottom: var(--border-light);
    }

    @media screen and (max-width: 768px) {
        max-width: 100%;
        margin: 0;

        .modal-content {
            display: flex;
            max-height: 100vh;
            flex-direction: column;
            border-radius: unset;
        }
    }

    @media screen and (max-height: 900px) and (min-width: 768px) {
        .modal-content {
            max-height: calc(100vh - 160px);
        }
    }

    @media screen and (max-height: 600px) and (min-width: 768px) {
        .modal-content, .GenericModal__wrapper {
            max-height: 85vh !important;
        }
    }

    @media screen and (max-width: 640px) {
        .GenericModal__wrapper {
            max-height: unset !important;
        }
    }
}
